
<template>
	<div>
		<Particles
			id="tsparticles"
			:particlesInit="particlesInit"
			:particlesLoaded="particlesLoaded"
			:options="options"
		/>

		<div class="loginFormContainer">
			<h3>企业门户网站管理系统</h3>
			<el-form
				ref="loginFormRef"
				:model="loginForm"
				status-icon
				:rules="rules"
				label-width="80px"
				class="loginRuleForm"
			>
				<el-form-item label="用户名" prop="username">
					<el-input v-model="loginForm.username" autocomplete="off" />
				</el-form-item>
				<el-form-item label="密码" prop="password">
					<el-input
						v-model="loginForm.password"
						type="password"
						autocomplete="off"
					/>
				</el-form-item>
				<el-form-item>
					<el-button
						class="loginButton"
						type="primary"
						@click="submitForm()"
						>登录</el-button
					>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script setup>
import { loadFull } from "tsparticles";
import { reactive, ref } from "vue";
import { useRouter } from "vue-router";
import axios from "axios";

/// 路由
const router = useRouter();
/// 登录表单的引用对象
const loginFormRef = ref();
///登录表单绑定的响应式对象
const loginForm = reactive({
	username: "",
	password: "",
});
/// 表单校验规则
const rules = reactive({
	username: [{ required: true, message: "请输入用户名", trigger: "blur" }],
	password: [{ required: true, message: "请输入密码", trigger: "blur" }],
});

/// 登录按钮点击
const submitForm = () => {
	// 1. 校验表单
	loginFormRef.value.validate((validate) => {
		if (!validate) {
			return;
		}

		// axios.post("adminapi/user/login", loginForm).then((res) => {
		// 	console.log(res.data);
		// });
		// 2. 提交表单内容
		commitFormToServer(loginForm);
	});
};

/// 提交表单到后台
const commitFormToServer = (loginForm) => {
	axios.post("adminapi/user/login", loginForm).then(updateToken);
};

const updateToken = (res) => {
	var token = res.data.token;
	if (!token) {
		return;
	}
	// 3. 设置token
	localStorage.setItem("token", token);
	// 4. 刷新路由
	router.push("/index");
};

/// 粒子效果回调
const particlesInit = async (engine) => {
	await loadFull(engine);
};

const particlesLoaded = async (container) => {
	console.log("Particles container loaded", container);
};

/// 粒子效果配置
const options = {
	background: {
		color: {
			value: "#2d3a4e",
		},
	},
	fpsLimit: 120,
	interactivity: {
		events: {
			onClick: {
				enable: true,
				mode: "push",
			},
			onHover: {
				enable: true,
				mode: "repulse",
			},
			resize: true,
		},
		modes: {
			bubble: {
				distance: 400,
				duration: 2,
				opacity: 0.8,
				size: 40,
			},
			push: {
				quantity: 4,
			},
			repulse: {
				distance: 200,
				duration: 0.4,
			},
		},
	},
	particles: {
		color: {
			value: "#ffffff",
		},
		links: {
			color: "#ffffff",
			distance: 150,
			enable: true,
			opacity: 0.5,
			width: 1,
		},
		collisions: {
			enable: true,
		},
		move: {
			direction: "none",
			enable: true,
			outModes: {
				default: "bounce",
			},
			random: false,
			speed: 6,
			straight: false,
		},
		number: {
			density: {
				enable: true,
				area: 800,
			},
			value: 80,
		},
		opacity: {
			value: 0.5,
		},
		shape: {
			type: "circle",
		},
		size: {
			value: { min: 1, max: 5 },
		},
	},
	detectRetina: true,
};
</script>


<style lang="scss" scoped>
.loginFormContainer {
	width: 500px;
	height: 300px;
	position: fixed;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	background-color: rgba($color: #000000, $alpha: 0.5);
	color: white;
	text-align: center;
	padding: 20px;

	h3 {
		font-size: 30px;
	}
}

::v-deep .el-form-item__label {
	color: white;
}
</style>